<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>维修工个人资料 - 家电维修系统</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <style>
        .profile-container {
            max-width: 800px;
            margin: 0 auto;
        }

        #map {
            height: 400px;
            width: 100%;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">维修工工作台</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link " href="/repairman">工作台</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/repairman/orders">我的订单</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" active href="/repairman/profile">个人资料</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/repairman-announcements">公告</a>
                </li>
            </ul>
            <div class="d-flex">
                <span class="navbar-text me-3" id="userInfo"></span>
                <button class="btn btn-outline-light" onclick="logout()">退出</button>
            </div>
        </div>
    </div>
</nav>


<div class="container mt-4">
    <div class="profile-container">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">个人资料</h5>
            </div>
            <div class="card-body">
                <form id="profileForm">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="realName" class="form-label">真实姓名</label>
                        <input type="text" class="form-control" id="realName" required>
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">手机号码</label>
                        <input type="tel" class="form-control" id="phone" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">电子邮箱</label>
                        <input type="email" class="form-control" id="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="address" class="form-label">地址</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="address" required>
                            <button type="button" class="btn btn-outline-secondary" onclick="getCurrentLocation()">
                                获取当前位置
                            </button>
                        </div>
                    </div>
                    <div id="map"></div>
                    <div class="mb-3">
                        <label for="oldPassword" class="form-label">原密码</label>
                        <input type="password" class="form-control" id="oldPassword">
                    </div>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">新密码</label>
                        <input type="password" class="form-control" id="newPassword">
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=spEZ8x14LoDN10ejoQD7GdxOEJYOwqcw"></script>
<script>
    let map;
    let marker;
    let currentUser = null;

    // 初始化地图
    function initMap() {
        map = new BMap.Map("map");
        const point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 12);
        map.enableScrollWheelZoom(true);

        // 添加点击事件
        map.addEventListener("click", function (e) {
            if (marker) {
                map.removeOverlay(marker);
            }
            marker = new BMap.Marker(e.point);
            map.addOverlay(marker);

            // 获取地址
            const geocoder = new BMap.Geocoder();
            geocoder.getLocation(e.point, function (rs) {
                if (rs) {
                    $('#address').val(rs.address);
                }
            });
        });
    }

    // 获取当前位置
    function getCurrentLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    const point = new BMap.Point(position.coords.longitude, position.coords.latitude);
                    map.centerAndZoom(point, 15);

                    if (marker) {
                        map.removeOverlay(marker);
                    }
                    marker = new BMap.Marker(point);
                    map.addOverlay(marker);

                    // 获取地址
                    const geocoder = new BMap.Geocoder();
                    geocoder.getLocation(point, function (rs) {
                        if (rs) {
                            $('#address').val(rs.address);
                        }
                    });
                },
                function (error) {
                    alert('获取位置失败：' + error.message);
                }
            );
        } else {
            alert('您的浏览器不支持地理定位');
        }
    }

    // 获取用户信息
    function getUserInfo() {
        const token = localStorage.getItem('token');
        if (!token) {
            window.location.href = '/login';
            return;
        }

        $.ajax({
            url: '/api/repairman/profile',
            type: 'GET',
            headers: {
                'Authorization': 'Bearer ' + token
            },
            success: function (response) {
                currentUser = response;
                $('#username').val(response.username);
                $('#realName').val(response.realName);
                $('#phone').val(response.phone);
                $('#email').val(response.email);
                $('#address').val(response.address);

                // 如果有地址，在地图上显示
                if (response.address) {
                    const geocoder = new BMap.Geocoder();
                    geocoder.getPoint(response.address, function (point) {
                        if (point) {
                            map.centerAndZoom(point, 15);
                            if (marker) {
                                map.removeOverlay(marker);
                            }
                            marker = new BMap.Marker(point);
                            map.addOverlay(marker);
                        }
                    });
                }
            },
            error: function (xhr) {
                if (xhr.status === 401) {
                    localStorage.removeItem('token');
                    window.location.href = '/login';
                }
            }
        });
    }

    // 提交表单
    $('#profileForm').on('submit', function (e) {
        e.preventDefault();

        const formData = {
            id: currentUser.id,
            realName: $('#realName').val(),
            phone: $('#phone').val(),
            email: $('#email').val(),
            address: $('#address').val()
        };

        // 如果输入了新密码，则更新密码
        const newPassword = $('#newPassword').val();
        if (newPassword) {
            formData.oldPassword = $('#oldPassword').val();
            formData.newPassword = newPassword;
        }

        $.ajax({
            url: '/api/repairman/profile',
            type: 'PUT',
            contentType: 'application/json',
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem('token')
            },
            data: JSON.stringify(formData),
            success: function () {
                alert('保存成功！');
            },
            error: function (xhr) {
                alert('保存失败：' + xhr.responseText);
            }
        });
    });

    // 退出登录
    function logout() {
        localStorage.removeItem('token');
        window.location.href = '/login';
    }

    // 页面加载完成后初始化
    $(document).ready(function () {
        initMap();
        getUserInfo();
    });
</script>
</body>
</html> 